<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("p").click(function(){
        $("#test").show();
        $("#test1 ").show();
    });
    $("#test, #cm, #close").click(function(){
        var classclick = this.id;
        if(classclick == "cm"){
            alert("click me!");
        }
        if(classclick == "close"){
            alert("Close dialog!");
        }
        $("#test1").hide();
        $("#test").hide();
    });
});
</script>

<style>
img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index:1;
}
p {
    position: absolute;
    top: 0px;
    z-index:2;
}
#test1 {
    position: absolute;
    left: 50%;
    top:100px;
    height: 200px;
    width: 300px;
    border-radius: 5px;
    background-color: #FFFFFF;
    z-index:4;
}
#test {
    position: absolute;
    left:0px;
    top:0px;
    background-color: #FF80B2;
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */
    height: 100%;
    width: 100%;
    z-index:3;
}

#t1 {
    background-color:#E0E0FF;
    height: 20%;
    border-bottom: 1px solid;
    padding-right: 5px;
    padding-left: 5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}

#t2 {
    height: 60%;
    border-bottom: 1px solid;
    padding-right: 5px;
    padding-left: 5px;
}
#t3{
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
}

#cm {
    float:right;
    cursor:pointer;
}
#close {
    float:right;
    cursor:pointer;
}

</style>
</head>
<body>

<h1>This is a heading</h1>

<img src="w3css.gif" width="100" height="140">

<p>Because the image has a z-index of -1, it will be placed behind the text.</p>

<div hidden id="test1">

<div id="t1">
Help Us Understand What's Happening Close
<div id="close">x</div>
</div>

<div id="t2">abc</div>

<div id="t3">
<button id="cm" type="button">Click Me!</button>
</div>

</div>

<div hidden id="test"></div>

</body>
</html>
